<!-- 
  computed()
    用于获取一个计算属性的数据的方法

    语法：
      const xxx = computed(() => {
        return '111'
      })
      xxx - 是一个只读的ref数据 { value: '111' }

      const yyy = computed({
        get() {

        },

        set(value) {

        }
      })

    readonly()
 -->

<template>
  <div>
    <h1>App</h1>
    <button @click="person.firstName = '李'">{{ person.firstName }}</button>
    <button @click="person.lastName = '四'">{{ person.lastName }}</button>
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>
    <button @click="fullName = '王 五'">直接修改 fullName</button>
  </div>
</template>

<script>
import { reactive, computed, readonly, ref } from 'vue'

export default {
  setup() {
    const person = reactive({
      firstName: '张',
      lastName: '三',
    })

    // 通过 computed 获取一个 fullName
    // const fullName = computed(() => {
    //   console.log('fullName getter 函数')
    //   return person.firstName + ' ' + person.lastName
    // })

    const fullName = computed(
      {
        get() {
          console.log('fullName getter 函数')
          return person.firstName + ' ' + person.lastName
        },

        set(value) {
          console.log('fullName setter 函数', value)
          // return value
          person.firstName = value.split(' ')[0]
          person.lastName = value.split(' ')[1]
        },
      }
      // {
      //   onTrack(e) {
      //     debugger
      //   },
      //   onTrigger(e) {
      //     debugger
      //   },
      // }
    )

    console.log('fullName', fullName) // 只读的 ref 对象 { value: '张 三' }
    fullName.value = '李 四' // 报错，计算属性不允许修改

    // 通过 readonly 创建一个数据
    const r1 = readonly({ count: 10 })
    console.log('r1', r1) // Proxy
    // r1.count++ // 报错，

    const r2 = reactive({ count: 10 })
    r2.count++

    const count = ref(10)
    const r3 = readonly({ count: count })
    console.log(r3.count) // 10 与 reactive 一样，当属性的值为 ref 数据时，会自动解包
    r3.count++ // 报错

    return {
      person,
      fullName,
    }
  },
}
</script>
